<template>
	<view>
		<nav-bar :title="title" leftIconSize="0"></nav-bar>
		<view class="outer">
			<view class="title">
				高仿专区
			</view>
			<u-row class="flexWrap">
				<u-col v-for="(listItem,listIndex) in copyList" @click="openMenu(listItem.moduleUrl,listItem.hidden)"
					:span="3" class="">
					<view class="menuIcon">
						<image :src="listItem.imageUrl" mode="widthFix" style="" class="iconImg"></image>
					</view>
					<view class="menuBody">{{listItem.title}}</view>
				</u-col>
			</u-row>
		</view>
		<view class="outer">
			<view class="title">
				文档操作
			</view>
			<u-row class="flexWrap">
				<u-col v-for="(listItem,listIndex) in officeList" @click="openMenu(listItem.moduleUrl,listItem.hidden)"
					:span="3" class="">
					<view class="menuIcon">
						<image :src="listItem.imageUrl" mode="widthFix" style="" class="iconImg"></image>
					</view>
					<view class="menuBody">{{listItem.title}}</view>
				</u-col>
			</u-row>
		</view>
		<view class="outer">
			<view class="title">
				表白专区
			</view>
			<u-row class="flexWrap">
				<u-col v-for="(listItem,listIndex) in girlOwnList" @click="openMenu(listItem.moduleUrl,listItem.hidden)"
					:span="3" class="">
					<view class="menuIcon">
						<image :src="listItem.imageUrl" mode="widthFix" style="" class="iconImg"></image>
					</view>
					<view class="menuBody">{{listItem.title}}</view>
				</u-col>
			</u-row>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "日常工具",
				copyList: [{
					moduleUrl: 'copy/we-chat',
					imageUrl: '/static/img/toolLogo/weChat.png',
					title: '微信界面',
					hidden: false
				}],
				officeList: [{
					moduleUrl: 'pdf/pdf',
					imageUrl: '/static/img/toolLogo/PDF.png',
					title: 'pdf',
					hidden: false
				}, {
					moduleUrl: 'word/word',
					imageUrl: '/static/img/toolLogo/WORD.png',
					title: 'word',
					hidden: true
				}],
				girlOwnList: [{
					moduleUrl: 'girlOwn/heart',
					imageUrl: '/static/img/toolLogo/WORD.png',
					title: '心形表白'
				},
				{
					moduleUrl: 'character/sign-character',
					imageUrl: '/static/img/toolLogo/WORD.png',
					title: '符号文字',
					
				}]
			}
		},
		methods: {
			openMenu(moduleUrl, hidden) {
				console.log(moduleUrl)
				if (hidden) {
					this.$refs.uToast.show({
						message:'暂未开放',
						type:'default'
					})
				} else {
          console.log(this.$config.pagePath.normal_base_url + moduleUrl)
          console.log(this.$config.pagePath.normal_base_url + moduleUrl)
          uni.navigateTo({
						url: this.$config.pagePath.normal_base_url + moduleUrl
					})
				}

			},
		}
	}
</script>

<style>
	.outer {
		border-radius: 20rpx;
		margin: 20rpx;
		box-shadow: 0 2rpx 10rpx #DDDDDD;
		padding: 30rpx 30rpx 40rpx 30rpx;
		background-color: #fff;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.flexWrap {
		flex-wrap: wrap
	}

	.menuIcon {
		text-align: center;
		margin: 36rpx 0 10rpx 0;
	}

	.iconImg {
		width: 64rpx;
		height: 64rpx;
	}

	.menuBody {
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #666;
	}
</style>
